<?php include_once 'header.php'; ?>
<aside class="right-side">
    <section class="content-header">
        <h1>
            Location
            <small>Branch Management</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-cubes"></i> Location</a></li>
            <li class="active">Branch</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-5">
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title" id="box-title">Add Location</h3>
                    </div>
                    <form id="location-form" role="form">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Name</label>
                                <input type="hidden" id="location-id" name="location-id">
                                <input type="text" class="form-control" id="location-name" name="location-name"
                                       placeholder="Enter location Name" data-validation="required"
                                       data-validation-error-msg="Please enter location name.">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Address</label>
                                <textarea type="text" class="form-control" id="location-address" name="location-address"
                                          placeholder="Enter location address" data-validation="required"
                                          data-validation-error-msg="Please enter location address."></textarea>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Phone</label>
                                <input type="text" class="form-control" id="location-phone" name="location-phone"
                                       placeholder="Enter location phone" data-validation="required"
                                       data-validation-error-msg="Please enter location phone.">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email</label>
                                <input type="text" class="form-control" id="location-email" name="location-email"
                                       placeholder="Enter location email">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Longitude</label>
                                <input type="text" class="form-control" id="location-long" name="location-long"
                                       placeholder="Enter location Longitude">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Latitude</label>
                                <input type="text" class="form-control" id="location-lat" name="location-lat"
                                       placeholder="Enter location Latitude">
                            </div>
                        </div>
                        <div class="box-footer">
                            <button id="submit-location" type="submit" class="btn btn-primary ladda-button"
                                    data-style="slide-right">Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-7">
                <div class="box box-primary">
                    <table class="table table-condensed">
                        <thead>
                        <tr>
                            <th style="width: 5%">#</th>
                            <th style="width: 50%">Location</th>
                            <th style="width: 20%">Date Created</th>
                            <th style="width: 25%;text-align: center;">Action</th>
                        </tr>
                        </thead>
                        <tbody id="location-list">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
</aside>
<?php include 'footer.php'; ?>
<script>

    $(document).ready(function () {
        $.get("location/getLocation", function (response) {
            if (!response.error) {
                populateBranchTable(response.data);
            } else {
                errorAlert(response.errorMessage);
            }
        });

        $("#category-name").keydown(function () {
            $(this).parent().removeClass('has-success');
        });

        $('body').on('click', 'button.edit-location', function () {
            var button = Ladda.create(this);
            button.start();
            var id = getElementId($(this).attr("id"));
            $.get("location/getLocation/" + id,function (response) {
                if (!response.error) {
                    $("#location-id").val(response.data.id);
                    $("#location-name").val(response.data.name);
                    $("#location-address").val(response.data.address);
                    $("#location-phone").val(response.data.phone);
                    $("#location-email").val(response.data.email);
                    $("#location-long").val(response.data.longitude);
                    $("#location-lat").val(response.data.latitude);

                } else {
                    errorAlert(response.errorMessage);
                }
            }).always(function () {
                    button.stop();
                });
        });

        $('body').on('click', 'button.delete-location', function () {
            var button = Ladda.create(this);
            button.start();
            var id = getElementId($(this).attr("id"));
            $.get("location/deleteLocation/" + id,function (response) {
                if (!response.error) {
                    $("#location-id").val("");
                    $("#location-name").val("");
                    $("#location-address").val("");
                    $("#location-phone").val("");
                    $("#location-email").val("");
                    $("#location-long").val("");
                    $("#location-lat").val("");
                    populateBranchTable(response.data);
                } else {
                    errorAlert(response.errorMessage);
                }
            }).always(function () {
                    button.stop();
                });
        });
    });

    $.validate({
        form: '#location-form',
        validateOnBlur: false,
        onError: function () {
            $("#status").text("");
            return false;
        },
        onSuccess: function ($form) {
            var submitButton = Ladda.create(document.querySelector('#submit-location'));
            submitButton.start();
            var handler = $.post("location/addEditLocation", $("#location-form").serialize(), function (response) {
                if (!response.error) {
                    populateBranchTable(response.data);
                    $("#location-id").val("");
                    $form.resetForm();
                } else {
                    errorAlert(response.errorMessage);
                }
            })
                .error(function (error) {
                    errorAlert("Please refresh page and try again, if Problem persist contact support team." + error.responseText);
                })
                .always(function () {
                    submitButton.stop();
                });
            return false;
        }
    });

    function populateBranchTable(jsonArray) {
        $("#location-list").html("");
        for (var i = 0; i < jsonArray.length; i++) {
            $("#location-list").append("<tr><td>" + (i + 1) + "</td><td>" + jsonArray[i].name + "</td><td>" + moment(jsonArray[i].dateCreate.date).format('lll') + "</td><td style='text-align: center;'><button id='location_" + jsonArray[i].id + "' type='button' class='btn btn-default table-action-button ladda-button edit-location' data-style='slide-right'><i class='fa fa-pencil'></i></button> &nbsp;&nbsp;<button id='location_" + jsonArray[i].id + "' type='button' class='btn btn-danger table-action-button ladda-button delete-location' data-style='slide-right'><i class='fa fa-trash-o'></i></button></td></tr>");
        }
    }
</script>